<template>
  <div class="process">
    <info-grid
      :rowSize="3"
      labelWidth="120px"
      customClass="process_grid"
      :infoData="infoData"
      :items="items">
    </info-grid>
    <div class="process_desc">
      <div class="desc_label">
        工艺规程描述：
      </div>
      <div class="desc_text">
        <div class="text">
          {{infoData.description}}
        </div>
        <span
          class="info_more"
          @click="openMore()">编辑
        </span>
      </div>
    </div>
    <el-dialog
      title="工艺规程描述"
      :visible.sync="dialogDescVisible"
      v-dialogDrag
      :close-on-click-modal="false"
      width="700px"
      customClass="mes_dialog"
    >
      <el-input
        maxlength="500"
        :value="infoData.description"
        v-model="description"
        rows="16"
        type="textarea"
        resize="none"></el-input>
      <div slot="footer" class="dialog-footer mes_btn btn_right">
        <el-button type="primary" @click="saveDesc">确认</el-button>
        <el-button @click="dialogDescVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import items from './items'

export default {
  name: 'WorkOrderProcess',
  props: {
    infoData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      items: items,
      dialogDescVisible: false,
      description: ''
    }
  },
  methods: {
    openMore() {
      this.dialogDescVisible = true
      this.description = this.infoData.description
    },
    saveDesc() {
      this.dialogDescVisible = false
      this.$emit('saveDesc', this.description)
    }
  }
}
</script>

<style lang="less">
  @bor: 1px solid #b2e8ff;
  .process {
    margin: 20px;
    display: flex;
    .process_grid {
      flex: 0 0 1200px;
    }
    .process_desc {
      flex: 1;
      display: flex;
      border-bottom: @bor;
      border-right: @bor;
      border-top: @bor;
      font-size: 14px;
      color: #333;
      box-sizing: border-box;
      line-height: 40px;
      .desc_label {
        flex: 0 0 120px;
        border-right: @bor;
        text-align: right;
        color: #0e68b0;
        background-color: #f0f8ff;
        padding-right: 10px;
        box-sizing: border-box;
      }
      .desc_text {
        flex: 1;
        padding-left: 10px;
        box-sizing: border-box;
        padding-top: 10px;
        .text {
          width: 330px;
          height: 60px;
          line-height: 21px;
          display: -webkit-box;
          overflow: hidden;
          word-break: break-all;
          text-overflow: ellipsis;
          -webkit-line-clamp: 3;
          /* ! autoprefixer: off */
          -webkit-box-orient: vertical;
          /* autoprefixer: on */
        }
        .info_more {
          display: inline-block;
          color: #3c8dbc;
          font-size: 12px;
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }
    .el-textarea.is-disabled .el-textarea__inner {
      color: #333;
    }
  }
</style>
